<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题 -->
    <title>表单元素</title>
</head>
<body>
    <form action="#" method="get">
        <!-- 
            input 输入框
            1.type 属性  设置输入框的类型
                - text 文本框
                - password 密码框
                - email 邮箱
                - url 地址

                - radio 单选框
                - checkbox 复选框
                - file 文件上传
                - number 数字输入框
                - range  范围输入框
                - color  颜色选择框
                - search 搜索框

                - date 日期选择框
                - datetime-local 日期时间选择框
                - week 周选择框

                - submit 提交按钮
                - reset 重置按钮
                - button 按钮

            2.readonly 设置只读
            3.value    设置默认值
            4.class    设置样式
            5.id       设置id
            6.name     设置name，表单收集数据
            7.autofocus 自动获取焦点
            8.autocomplete 自动完成
            9.disabled 禁用
            10.hidden 隐藏    
            11.checked 、 selected  选中
            12.size  设置大小
            13.maxlength  设置最大长度
            14.minlength  设置最小长度
            15.max  设置最大值
            16.min  设置最小值
            17.step  设置步长
            18.placeholder  设置提示文本
            19.multiple 设置多个

            select option 下拉框
            textarea  文本域    
        -->
        <input type="text" name="username" placeholder="请输入用户名" value="张三" readonly/><br/>
        <input type="password" name="password" placeholder="请输入密码" /><br/>
        <input type="email" name="email" placeholder="请输入邮箱" autofocus /><br/>
        <input type="url" name="url" placeholder="请输入url地址" autocomplete="false" /><br/>
        性别：必须name一致才可以互斥
        <input type="radio" name="gender" value="male" />男
        <input type="radio" name="gender" value="female" />女
        <br/>
        爱好：必须name一致，才会收集一组数据
        <input type="checkbox" name="hobby" value="football" />足球
        <input type="checkbox" name="hobby" value="coding" checked />编程
        <input type="checkbox" name="hobby" value="swimming" />游泳
        <br/>
        地址：multiple多选  selected选中
        <select name="address" multiple>
            <option value="beijing">北京</option>
            <option value="shanghai" selected>上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br/>
        评价：
        <textarea name="evaluate" cols="30" rows="10"></textarea>
        <br/>
        头像上传：
        <input type="file" name="avatar" multiple />
        <br/>
        时间：
        <input type="date" name="date" />
        <input type="datetime-local" name="datetime" />
        <input type="week" name="week" />
        <br/>
        购物车：number限制数字  step设置步长
        <input type="number" name="cart" min="1" max="10" step="2" />
        <input type="range" name="range" min="0" max="10" step="2" value="4" />
        <input type="color" name="color" hidden />
        <input type="search" name="search" />
        <br/>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
        <input type="button" value="普通按钮" disabled />
    </form>
</body>
</html>   